<template>
  <div class="project_interview_container">
    <!-- <div class='ai_container'><AIConsulting size='small'/></div> -->
    <div class="project_container">
      <div class="project_container_projectName">
        <div class="project_name" :title="projectData.name">
          {{ projectData.name }}
        </div>
        <a-button
          v-if="projectData.registrationStatus == 1"
          type="primary"
          class="quitProjectBtn"
          @click="quitProject"
          >退出项目</a-button
        >
      </div>
      <div class="project_container_message">
        <div
          class="message_Box"
          v-if="
            projectData.newProjectResultFileList &&
            projectData.newProjectResultFileList.length
          "
        >
          <div class="message_label">项目成果展示</div>
          <div class="message_content">
            <a-carousel arrows>
              <template #prevArrow>
                <div
                  class="custom-slick-arrow"
                  style="left: 10px; z-index: 1; font-size: 30px; color: #d2ccdd"
                >
                  <LeftCircleOutlined />
                </div>
              </template>
              <template #nextArrow>
                <div
                  class="custom-slick-arrow"
                  style="right: 20px; font-size: 30px; color: #d2ccdd"
                >
                  <RightCircleOutlined />
                </div>
              </template>
              <div
                class="imagesBox"
                v-for="(item, index) in projectData.newProjectResultFileList"
              >
                <div class="img">
                  <img
                    :src="item[0].fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 0)"
                  />
                </div>
                <div class="img">
                  <img
                    :src="item[1].fileUrl"
                    @click.stop=";(visible = true), (current = index * 2 + 1)"
                  />
                </div>
              </div>
            </a-carousel>
          </div>
        </div>

        <div class="message_Box" v-if="projectData.resultLink">
          <div class="message_label">项目成果链接</div>
          <div class="message_content">
            {{ projectData.resultLink || '暂无' }}
          </div>
        </div>
        <div class="message_Box">
          <div class="message_label">项目简介:</div>
          <div class="message_content">
            <div v-html="projectData.describe || '暂无'"></div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">报名状态:</div>
          <div class="message_content statusContent">
            {{ signUpStatusLabel[projectData.registrationStatus] }}
          </div>
        </div>

        <div
          class="message_Box"
          v-if="projectData.template == 2 || projectData.template == 0"
        >
          <div class="message_label jobLabel">
            <div>
              <span>项目成员: <span class="jobLabelTip"></span></span>
            </div>
          </div>
          <div class="message_content job_content">
            <div
              class="jobBox"
              v-for="(item, i) in projectData.projectStudentVOList"
            >
              <div class="jobBox_img_and_skills">
                <div class="jobImgBox">
                  <img src="@/assets/user.png" alt="" />
                </div>
                <div class="jobBox_skills">
                  <div>姓名：{{ item.studentName }}</div>
                  <a-tooltip color="rgba(0,0,0,0.6)">
                    <template #title>{{ item.jobName }}</template>
                    <div class="jobBox_job_content">
                      职位：{{ item.jobName }}
                    </div>
                  </a-tooltip>
                  <a-tooltip color="rgba(0,0,0,0.6)">
                    <template #title>{{ item.skill }}</template>
                    <div class="jobBox_skills_content">
                      技能：{{ item.skill }}
                    </div>
                  </a-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class='message_Box'> -->
        <!-- <div class='message_label'>项目基本信息: </div> -->
        <div class="message_basic_information">
          <div class="message_Box">
            <div class="message_label">所属年级:</div>
            <div class="message_content">
              {{ projectData.grade }}
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">所属班级:</div>
            <div class="message_content">
              <span
                v-if="
                  projectData.gradeClassList &&
                  projectData.gradeClassList.length > 0
                "
                v-for="(item, i) in projectData.gradeClassList"
              >
                {{ item.gradeClassName
                }}{{ i == projectData.gradeClassList.length - 1 ? '' : '、' }}
              </span>
              <template
                v-if="
                  !(
                    projectData.gradeClassList &&
                    projectData.gradeClassList.length > 0
                  )
                "
              >
                暂无
              </template>
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">项目难度:</div>
            <div class="message_content">
              <a-rate v-model:value="projectData.difficulty" disabled />
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">项目类型:</div>
            <div class="message_content">
              {{ projectData.category }}
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">项目报名类型:</div>
            <div class="message_content">
              {{
                projectData.template
                  ? { 1: '多组协作', 2: '经典' }[projectData.template]
                  : '暂无'
              }}
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">项目成员总数:</div>
            <div class="message_content">
              {{
                projectData.totalMemberLimit
                  ? `${projectData.totalMemberLimit}人`
                  : '暂无'
              }}
            </div>
          </div>

          <div class="message_Box" v-if="projectData.template == 1">
            <div class="message_label">小组人数限制:</div>
            <div class="message_content">
              {{
                projectData.groupMemberLimit
                  ? `每组最多${projectData.groupMemberLimit}人`
                  : '暂无'
              }}
            </div>
          </div>

          <div class="message_Box">
            <div class="message_label">开发模型:</div>
            <div class="message_content">
              {{ projectData.devModelName || '暂无' }}
            </div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">关联课程:</div>
          <div class="message_content">
            <span
              v-if="projectData.courseList && projectData.courseList.length > 0"
              v-for="(item, i) in projectData.courseList"
            >
              {{ item.courseName
              }}{{ i == projectData.courseList.length - 1 ? '' : '、' }}
            </span>
            <template
              v-if="
                !(projectData.courseList && projectData.courseList.length > 0)
              "
            >
              暂无
            </template>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">评分标准:</div>
          <div class="message_content">
            <div v-html="projectData.scoreStandard || '暂无'"></div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">项目目标:</div>
          <div class="message_content">
            <div v-html="projectData.target || '暂无'"></div>
          </div>
        </div>

        <div class="message_Box">
          <div class="message_label">项目周期:</div>
          <div class="message_content">
            {{ formatDate(projectData.startTime) }}至{{
              formatDate(projectData.endTime)
            }}
          </div>
        </div>

        <div class="message_Box" v-if="projectData.mainTeacher">
          <div class="message_label">主指导老师:</div>
          <div class="message_content job_content">
            <a-tooltip>
              <template
                v-if="projectData.mainTeacher.introduceYourself"
                #title
                >{{
                  projectData.mainTeacher
                    ? projectData.mainTeacher.introduceYourself
                    : ''
                }}</template
              >
              <div class="jobBox">
                <div class="jobBox_img_and_skills">
                  <div class="jobImgBox">
                    <img src="@/assets/user.png" alt="" />
                  </div>
                  <div class="jobBox_skills">
                    <div>
                      姓名：{{
                        projectData.mainTeacher
                          ? projectData.mainTeacher.name
                          : '暂无'
                      }}
                    </div>
                    <div class="jobBox_job_content">
                      专业：{{
                        projectData.mainTeacher.orientation
                          ? projectData.mainTeacher.orientation
                          : '暂无'
                      }}
                    </div>
                  </div>
                </div>
              </div>
            </a-tooltip>
          </div>
        </div>

        <div
          class="message_Box"
          v-if="
            projectData.coTeacherList && projectData.coTeacherList.length > 0
          "
        >
          <div class="message_label">副指导老师:</div>
          <div class="message_content job_content">
            <div class="jobBox" v-for="item in projectData.coTeacherList">
              <a-tooltip>
                <template #title v-if="item.introduceYourself">{{
                  item.introduceYourself
                }}</template>
                <div class="jobBox_img_and_skills">
                  <div class="jobImgBox">
                    <img src="@/assets/user.png" alt="" />
                  </div>
                  <div class="jobBox_skills">
                    <div>姓名：{{ item.name || '暂无' }}</div>
                    <div class="jobBox_job_content">
                      专业：{{ item.orientation || '暂无' }}
                    </div>
                  </div>
                </div>
              </a-tooltip>
            </div>
          </div>
        </div>

        <!-- </div> -->
      </div>
    </div>
    <!-- <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
				      <p>Some contents...</p>
				      <p>Some contents...</p>
				      <p>Some contents...</p>
				    </a-modal> -->
    <a-image-preview-group
      v-if="visible"
      :preview="{ visible, onVisibleChange: () => (visible = false), current }"
    >
      <a-image
        v-for="item in projectData.projectResultFileList"
        :width="200"
        :style="{ display: 'none' }"
        :src="item.fileUrl"
      />
    </a-image-preview-group>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

import AIConsulting from '@/components/AIConsulting.vue'
import { useRoute, useRouter } from 'vue-router'
import { getProjectMessage } from '@/request/projectSquare.js'
import { quitMyProject, getJobId } from '@/request/projectManagement.js'
import { Modal } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { message } from 'ant-design-vue'
import MarkdownIt from 'markdown-it'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue'

const visible = ref(false)
const current = ref(0)
const router = useRouter()
//markdown渲染
function markdownIt() {
  const md = new MarkdownIt()

  if (projectData.describe && projectData.describe.includes('###')) {
    projectData.describe = md.render(projectData.describe)
  }
  if (projectData.scoreStandard && projectData.scoreStandard.includes('###')) {
    projectData.scoreStandard = md.render(projectData.scoreStandard)
  }
  if (projectData.target && projectData.target.includes('###')) {
    projectData.target = md.render(projectData.target)
  }
}

//退出项目
function quitProject() {
  Modal.confirm({
    title: `你确定要退出该项目吗？`,
    icon: createVNode(ExclamationCircleOutlined),
    async onOk() {
      let jobData = await getJobId(route.query.id)
      if (!jobData || !jobData.data || !jobData.data.id) {
        message.error('在本项目下没有查询到您的信息')
        return
      }
      let res = await quitMyProject({
        projectJobId: jobData.data.id,
      })
      console.log('jobData', jobData)
      if (res && res.code == 200) {
        message.success('退出项目成功')
        router.replace({
          name: 'PersonalCenter',
        })
      } else {
        message.error('退出项目失败')
      }
      Modal.destroyAll()
    },
    onCancel() {},
  })
}

let open = ref(true)
onMounted(async () => {
  const id = route.query.id
  let res = await getProjectMessage(id)
  for (let key in res.data) {
    if (typeof res.data[key] == 'string') {
      projectData[key] = `${res.data[key]}`.trim() || '暂无'
    } else {
      projectData[key] = res.data[key]
    }
  }
	projectData['newProjectResultFileList'] = res?.data?.projectResultFileList?.reduce((acc, curr, index) => {
		if (index % 2 === 0) {
			// 每两个元素创建一个新数组
			acc.push([curr, res?.data?.projectResultFileList[index + 1]]);
		}
		return acc;
	}, [])
  markdownIt()
  console.log('项目管理', res)
})

const route = useRoute()
let projectData = reactive({})

//项目日期处理
function formatDate(dateString) {
  // 将输入的字符串转换为 Date 对象
  const date = new Date(dateString)

  // 获取年份、月份和日期
  const year = date.getFullYear()
  const month = date.getMonth() + 1 // 月份从0开始，需要加1
  const day = date.getDate()

  // 返回格式化后的字符串
  return `${year || ''}年${month || ''}月${day || ''}日`
}

let signUpStatusLabel = ['未开始', '招募中', '已截止']
</script>

<style lang="scss" scoped>
@import '@/styles/public.scss';
$aiContainerWidth: 20%;
$aiContainerHeight: 60vh;
$aiContainerMarginRight: 10px;
$projectNameHeight: 50px;
$messageContainerPaddingTop: 22px;
$messageContainerPaddingRight: 30px;

.project_interview_container {
  width: 100%;
  height: 100%;
  /* padding: 20px 10%; */
  /* padding-right:30px; */
  display: flex;

  /* .ai_container{
			width:$aiContainerWidth;
			height:$aiContainerHeight;
			margin-right:$aiContainerMarginRight;
			display: flex;
			align-items:center;
			justify-content: center;
			margin:auto 0;
		} */

  .project_container {
    width: 100%;
    height: 100%;
    background-color: $theme1BgColor2;
    /* background-color: rgb(197,193,229,0.4) ; */
    /* background-color: rgb(137,134,202,0.3) ; */
    border-radius: 10px;

    .project_container_projectName {
      width: 100%;
      height: $projectNameHeight;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: white;
      border-radius: 10px 10px 0 0;
      font-weight: bold;
      font-size: 18px;
      position: relative;

      .quitProjectBtn {
        position: absolute;
        top: 50%;
        right: 2%;
        transform: translateY(-50%);
      }
    }

    .project_container_message {
      width: 100%;
      height: calc(100% - #{$projectNameHeight});
      padding: $messageContainerPaddingTop $messageContainerPaddingRight;
      overflow-y: auto;
      @include hoverShowScrollBar();

      .message_basic_information {
        max-width: 100%;
        align-self: center;
        display: -ms-grid;
        display: grid;
        /* 启用 Grid 布局 */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        /* 自动填充列，最小宽度200px */
        gap: 0px 15px;
        /* 设置子元素之间的间距 */
        align-items: start;
        /* 垂直对齐 */
      }

      .message_Box {
        margin-bottom: 20px;

        .message_label {
          margin-bottom: 10px;
        }

        .message_content {
          width: 100%;
          background-color: white;
          padding: 12px;
          line-height: 22px;
          border-radius: 5px;
        }

        .statusContent {
          @include FlexCenterAndCenter();
        }

        $jobBoxWidth: 220px;

        .job_content {
          background-color: transparent;
          display: grid;
          /* 启用 Grid 布局 */
          grid-template-columns: repeat(auto-fill, minmax($jobBoxWidth, 1fr));
          /* 自动填充列，最小宽度200px */
          gap: 10px;
          /* 设置子元素之间的间距 */
          align-items: start;
          /* 垂直对齐 */

          .active {
            border: 2px solid $theme1BgColorDeep;
          }

          .jobBox {
            @include FlexCenterAndCenter();
            justify-content: flex-start;
            min-width: $jobBoxWidth;
            height: 120px;
            padding: 10px;
            border-radius: 10px;
            background-color: white;

            .jobBox_img_and_skills {
              display: flex;
              align-items: center;
              width: 100%;
              /* justify-content: space-between; */

              $jobImgBox: 50px;
              $jobImgBoxMarginRight: 10px;

              .jobImgBox {
                width: $jobImgBox;
                height: $jobImgBox;
                border-radius: 50%;
                margin-right: $jobImgBoxMarginRight;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .jobBox_skills {
                width: calc(100% - #{$jobImgBox} - #{$jobImgBoxMarginRight});

                .jobBox_job_content {
                  width: 100%;
                  display: inline-block;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }

                .jobBox_skills_content {
                  display: -webkit-box;
                  /* 使用 Flexbox 布局 */
                  -webkit-box-orient: vertical;
                  /* 垂直排列盒子 */
                  -webkit-line-clamp: 2;
                  /* 限制显示的行数 */
                  overflow: hidden;
                  /* 隐藏超出部分 */
                  text-overflow: ellipsis;
                  /* 使用省略号 */
                }
              }
            }

            .jobBox_jobNum {
              display: flex;
              align-items: center;
              /* justify-content: space-between; */
              flex-wrap: wrap;
              margin-top: 10px;

              & > div {
                margin-right: 10px;
              }

              & > div:nth-last-child(1) {
                margin-right: 0px;
              }
            }
          }
        }

        .jobLabel {
          display: flex;
          align-items: center;
          justify-content: space-between;

          :deep(.ant-btn) {
            height: 30px;
            font-size: 13px;
          }

          & > div {
            @include FlexCenterAndCenter();

            .jobLabelTip {
              font-size: 12px;
              color: grey;
            }
          }
        }
      }
    }
  }
	.imagesBox{
		width: 100%;
		height: 200px;
		display: flex !important;
		justify-content: space-around;
		align-items: center;
		.img {
			width: 50%;
			/* border: 1px solid #d7d2e2; */
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				max-height: 100%;
				max-width: 100%;
				cursor: pointer;
			}
		}
	}
	:deep(.slick-slide) {
		text-align: center;
		height: 160px;
		line-height: 160px;
		background: #ecf3fe;
		overflow: hidden;
	}
	:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  transition: ease all 0.3s;
  z-index: 1;
}
	:deep(.slick-arrow.custom-slick-arrow:before) {
		display: none;
	}
	:deep(.slick-arrow.custom-slick-arrow:hover) {
		color: #fff;
		opacity: 0.5;
	}
	:deep(.slick-slide h3) {
		color: #fff;
	}
}
</style>
